<template>
  <div class="plq">
    <header class="bookxq">
      <div class="title">
        <router-link to class="left">
          <span class="ui-leftaw-2" @click="$router.back(-1)"></span>
        </router-link>
        <div class="tit-top">
          <h3>评论({{ pllist.length }})</h3>
          <router-link to="/home" class="home">首页</router-link>
        </div>
      </div>
    </header>
    <div class="plbox">
      <h4 class="m-book-title">
        <i class="j-comment-title">精彩评论</i
        ><span class="j-comment-count"
          ><em>({{ pllist.length }})</em></span
        ><a
          class="comment j-to-comment"
          onclick="_gaq.push(['_trackEvent', 'bookdetail', 'comment', 'post'])"
          data-login="false"
          ><i
            class=""
            onclick="_gaq.push(['_trackEvent', 'bookdetail', 'comment', 'post'])"
          ></i
          ><span
            class=""
            onclick="_gaq.push(['_trackEvent', 'bookdetail', 'comment', 'post'])"
            >写评论</span
          ></a
        >
      </h4>
      <ul class="j-more-comment">
        <li class="j-intro-wrap" v-for="(item, p) in pllist">
          <img :src="item.avatar" class="headimg j-headimg" />
          <p class="user">
            <span class="uname j-uname"> {{ item.nickName }} </span>
            <span class="time">{{ item.time }}</span>
          </p>
          <!-- <p class="star">
								<span>&nbsp;</span>
							
								<span>&nbsp;</span>
							
								<span>&nbsp;</span>
							
								<span>&nbsp;</span>
							
								<span>&nbsp;</span>		
					</p>								 -->
          <p class="desc j-intro">
            <router-link to="/">
              {{ item.comment }}
            </router-link>
          </p>
          <p class="opt opts f-cb">
            <span class="praise j-praise"
              ><i></i><span class="likes">{{ item.likes }}</span>
            </span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { plFunc } from "@/request/index";
export default {
  data() {
    return {
      book_id: this.$route.query.bookId,
      pllist: [],
    };
  },
  methods: {
    async bkxq() {
      let id = this.book_id;
      // console.log(this.book_id);
      plFunc(id).then((res) => {
        // console.log();
        let pllis = res.all.list;
        this.pllist = pllis.map((item) => {
          // console.log(item.time);
          // console.log(list);
          let timestamp = item.time;
          // 此处时间戳以毫秒为单位
          let date = new Date(timestamp);
          item.time =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate();
          // console.log(item);
          return item;
        });
      }).catch(err => {
          console.log("请求失败...");
        });
    },
  },
  created() {
    // console.log(this.$route.query);
    this.bkxq();
  },
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.plq {
  .bookxq {
    width: 100%;
    background-color: black;
    min-width: 362px;
    .title {
      margin: auto 1%;
      height: 44px;
      line-height: 44px;
      a.left {
        float: left;
        font-size: 14px;
        .ui-leftaw-2 {
          display: inline-block;
          margin-bottom: 3px;
          margin-left: 15px;
          margin-right: 15px;
          vertical-align: middle;
          width: 10px;
          height: 18px;
          background: url(../static/imgs/arrow-left.png);
          background-size: 100% 100%;
        }
      }
      .tit-top {
        padding: 0 2%;
        box-sizing: border-box;
        text-align: center;
        h3 {
          width: 80%;
          display: inline-block;
          color: white;
        }
        a {
          display: inline-block;
          &.home {
            width: 10%;
            height: 28px;
            line-height: 28px;
            color: #fff;
            background: #000;
            font-size: 15px;
            padding: 0;
            text-align: right;
          }
        }
      }
    }
  }
  .plbox {
    background: #faf7f5;
    padding: 15px;
    .m-book-title {
      color: #1d2c33;
      font-size: 16px;
      font-weight: bold;
      span {
        color: #aba49a;
        font-size: 12px;
        font-weight: normal;
      }
      a {
        float: right;
        font-weight: normal;
        color: #333;
        outline: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        i {
          margin-top: 1px;
          width: 12px;
          height: 13px;
          display: inline-block;
          vertical-align: middle;
          background: url(../static/imgs/pl.png) 0 0 no-repeat;
          background-size: 100% 100%;
        }
        span {
          display: inline-block;
          padding-left: 5px;
          vertical-align: middle;
          color: #3a98c9;
          font-size: 14px;
        }
      }
    }
    ul {
      li {
        position: relative;
        padding: 15px 0;
        margin: 0 15px;
        border-bottom: 1px dotted #b3aeaa;
        .headimg {
          width: 34px;
          height: 34px;
          float: left;
          margin-right: 15px;
          border-radius: 50%;
        }
        p {
          &.user {
            height: 15px;
            .uname {
              color: #6392c5;
              font-size: 14px;
            }
            .time {
              position: absolute;
              padding-left: 40px;
              padding-bottom: 40px;
              right: 0;
              top: 14px;
              font-size: 11px;
              color: #999;
            }
          }
          &.star {
            padding-top: 7px;
          }
          &.desc {
            padding-top: 10px;
            line-height: 17px;
            font-size: 14px;
            color: #545454;
            -webkit-line-clamp: 4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
          }
          &.opts {
            margin-top: 10px;
            height: 15px;
            padding-left: 49px;
            line-height: 20px;
            .praise {
              float: right;
              font-size: 11px;
              color: #999;
              height: 15px;
              i {
                display: block;
                float: left;
                width: 15px;
                height: 15px;
                background: url(../static/imgs/like.png);
                background-size: 100% 100%;
              }
              .likes {
                float: left;
                line-height: 20px;
                width: 24px;
                text-overflow: clip;
                white-space: nowrap;
                overflow: hidden;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>